<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
    <script th:src="@{|/jquery/jquery.md5.js|}"></script>
    <!-- 引入 echarts.js -->

    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script>
        $(function () {
            // 所有班级的折现图
            selectlineAll();
            // 所有班级的矩形图
            selectjuxAll();
        })

         function selectlineAll(){
            url="/permission/radioAll"
             $.get(url,"",function (data){
                 if(data.result){

                     // 基于准备好的dom，初始化echarts实例
                     var myChart = echarts.init(document.getElementById('main1'));
                     option = {
                         title: {
                             // text: '各班男女',
                             // subtext: '纯属虚构'
                         },
                         tooltip: {
                             trigger: 'axis'
                         },
                         legend: {
                             data: ['男生', '女生', '总计']
                         },
                         xAxis: {
                             type: 'category',
                             boundaryGap: false,
                             data: []
                         },
                         yAxis: {
                             type: 'value',
                             axisLabel: {
                                 formatter: '{value} '
                             }
                         },
                         series: [
                             {
                                 name: '男生',
                                 type: 'line',
                                 data: [],
                             } ,
                             {
                                 name: '女生',
                                 type: 'line',
                                 data: [],
                             } ,
                             {
                                 name: '总计',
                                 type: 'line',
                                 data: [],
                             }
                         ]
                     };
                     $.each(data.clazzList,function(index,clazz){
                         option.xAxis.data.push(clazz.cname);
                         option.series[0].data.push({value:clazz.boy,name:'男生'});
                         option.series[1].data.push({value:clazz.gril,name:'女生'});
                         option.series[2].data.push({value:(clazz.gril+clazz.boy),name:'总计'});
                     })
                     // 使用刚指定的配置项和数据显示图表。
                     myChart.setOption(option);
                 }
             })
         }

        function selectjuxAll(){
            url="/permission/radioAll"
            $.get(url,"",function (data){
                if(data.result){
                    // 基于准备好的dom，初始化echarts实例
                    var myChart2 = echarts.init(document.getElementById('main2'));
                    // 指定图表的配置项和数据
                    option1 = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data: ['男生', '女生']
                        },
                        grid: {
                            left: '14%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: []
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '男生',
                                type: 'bar',
                                stack: '广告',
                                data: []
                            },
                            {
                                name: '女生',
                                type: 'bar',
                                stack: '广告',
                                data: []
                            },
                        ]
                    };
                    $.each(data.clazzList,function(index,clazz){
                        option1.xAxis[0].data.push(clazz.cname);
                        option1.series[0].data.push({value:clazz.boy,name:'男生'});
                        option1.series[1].data.push({value:clazz.gril,name:'女生'});
                    })
                    // 使用刚指定的配置项和数据显示图表。
                    myChart2.setOption(option1);
                }
            })
        }
    </script>
</head>
<body>
<br/><br/>
<!--    折现-->
    <div id="main1" style="width: 480px;height:350px;float:left;margin-left: 5%"></div>
<!--矩形-->
    <div id="main2" style="width: 480px;height:350px;float:left"></div>
</body>
</html>